<template>
  <view class="index" >

      <!-- 地点搜索建议 -->
    <view class="model" v-if="false">
            <!-- 地址输入建议 -->
            <input style="border:1px solid black;"  @click="getsuggest" v-model="keyword" />
            <!--关键词输入提示列表渲染-->
            <view v-for="(item,index) in suggestion" :key="index" class="list" @click="fatchItem(item)">
                <!--绑定回填事件-->
                <view>
                <!--根据需求渲染相应数据-->
                <!--渲染地址title-->
                <view style="text-align:center;">{{item.title}}</view>
                <!--渲染详细地址-->
                <view style="font-size:12px;color:#666;text-align:center;">{{item.address}}</view></view>
            </view>
    </view>

    <!-- 计算两点之间的距离、路程消耗时长 -->
    <view class="model" v-if="false">
            <!--输入起点和终点经纬度坐标，格式为string格式-->
            <label>起点坐标:
                <input style="border:1px solid #000;" name="start" />
            </label>
            <!--多个终点位置示例：39.984060,116.307520;39.984060,116.507520-->
            <label>终点坐标:
                <input style="border:1px solid #000;" name="dest" />
            </label>
            <!--提交表单数据-->
            <button @click="formSubmit">计算距离</button>

            <!--渲染起点经纬度到终点经纬度距离，单位为米-->
            <view v-for="(item,index) in distance" :key="index">
                <view>起点到终点{{index+1}}的步行距离为{{item.distance}}米,持续时间为{{item.duration}}秒</view>
                <view style="color:red;margin-top:20rpx;">
                    当前交通使用的方式为{{model}}。持续时间表示从起点到终点的结合路况的时间，
                    秒为单位。注：步行方式不计算耗时，该值始终为0
                </view>
            </view>
    </view>

    <view class="model">

        <map
            id="myMap"
            style="width: 100%; height: 400px;"
            :longitude="guihuaForm.longitude" :latitude="guihuaForm.latitude"
            scale='16'
            :polyline="polyline"
            show-location
            >
        </map>

        <button @click="luxianGuihua">路线规划</button>
        <view>交通方式</view>

        <view class="flex">
            <view v-for="(item,index) in modelList" :key="index">
                <u-button :style="{active:item==guihuaModel}" @click="changeModel(item)">{{item}}</u-button>
            </view>
            <text>‘driving’（驾车）、‘walking’（步行）、‘bicycling’（骑行）、‘transit’（公交）</text>
        </view>


    </view>


    
  </view>
</template>

<script>
    let QQMapWX = require('../../utils/map/qqmap-wx-jssdk.js');
	let qqmapsdk;
export default {
        components: {},
        data() {
            return {
                //! 搜索建议数据
                keyword:"广场",
                suggestion:[],
                //! 计算距离数据 
                form:"22.938071,113.388444",
                to:[{
                    latitude: 22.930309,
                    longitude: 113.389107,
                }],
                distance:"",
                model:"driving",
                //! 路线规划数据
                polyline:[],// 规划路线的数据
                guihuaForm:{
                    latitude: 22.938071,
                    longitude: 113.388444,
                },
                guihuaTo:{
                    latitude: 22.930309,
                    longitude: 113.389107,
                },
                guihuaModel:"driving",
                // ‘driving’（驾车）、‘walking’（步行）、‘bicycling’（骑行）、‘transit’（公交）
                modelList:['driving','walking','bicycling','transit']

            }
        },
        onLoad() {
            qqmapsdk = new QQMapWX({
                key: ""//腾讯地图key值
            });
            this.luxianGuihua()
        },
        methods: {
            // 点击选中的地址的事件
            fatchItem: function (e) {
                console.log('这是点击之后的信息：');
                console.log(e);
            },
            //触发关键词输入提示事件
            getsuggest: function(e) {
                var _this = this;
                //调用关键词提示接口
                qqmapsdk.getSuggestion({
                    //获取输入框值并设置keyword参数
                    keyword: this.keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
                    region:'广东省', //设置城市名，限制关键词所示的地域范围，非必填参数
                    success: function(res) {//搜索成功后的回调
                        console.log('这是搜索地址的结果：');
                        console.log(res);
                        _this.suggestion =  res.data
                    },
                    fail: function(error) {
                        console.error(error);
                    },
                });
            },
            // 计算距离
            formSubmit(e){
                var _this = this;
                //调用距离计算接口
                qqmapsdk.calculateDistance({
                    //mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行），不填默认：'walking',可不填
                    //from参数不填默认当前地址
                    //获取表单提交的经纬度并设置from和to参数（示例为string格式）
                    from: _this.form || '', //若起点有数据则采用起点坐标，若为空默认当前地址
                    to: _this.to, //终点坐标
                    /**
                     * 可选值：‘driving’（驾车）、‘walking’（步行），默认：'walking’
                        新增直线距离计算，‘straight’（直线）
                     */
                    mode:_this.model,
                    success: function(res) {//成功后的回调

                        console.log(res);
                        var res = res.result;
                        var dis = [];
                        for (var i = 0; i < res.elements.length; i++) {
                            dis.push({
                                distance:res.elements[i].distance,
                                duration:res.elements[i].duration
                            }); //将返回数据存入dis数组，
                        }
                        _this.distance =  dis
                    },
                    fail: function(error) {
                        console.error(error);
                    },
                })
            },
            // 路线规划
            luxianGuihua(e) {
                    var _this = this;
                    //调用距离计算接口
                    qqmapsdk.direction({
                    mode: this.guihuaModel,//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
                    //from参数不填默认当前地址
                    from: this.guihuaForm,
                    to: this.guihuaTo, 
                    success: function (res) {
                            var ret = res;
                            var coors = ret.result.routes[0].polyline, pl = [];
                            //坐标解压（返回的点串坐标，通过前向差分进行压缩）
                            var kr = 1000000;
                            for (var i = 2; i < coors.length; i++) {
                            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                        }
                        //将解压后的坐标放入点串数组pl中
                        for (var i = 0; i < coors.length; i += 2) {
                            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
                        }
                        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
                            _this.latitude = pl[0].latitude,
                            _this.longitude = pl[0].longitude,
                            _this.polyline =  [{
                                points: pl,
                                color: '#FF0000DD',
                                width: 4
                            }]
                    },
                    fail: function (error) {
                        console.error(error);
                    },
                });
            },
            // 路线规划的切换交通方式
            changeModel(value){
                this.guihuaModel = value
                this.luxianGuihua()
            }

        }
}
</script>

<style lang="scss" scoped>
.model {
  border: 1px solid #000;
  margin-bottom: 30rpx;
}
.input{
  border: 1px solid red;
  width: 80%;
  margin-top: 30rpx;
  margin-left: 30rpx;
}
.m-30{
  margin: 30rpx;
}

.list{
    width: 80%;
    border: 1px solid #000;
}
.active{
    color: aqua;
    background-color: aqua;
}
.flex{
    display: flex;
}

</style>
